import React, { useState, useEffect } from "react";
import { NavBar } from "react-vant"; //导航栏
import { useNavigate } from "react-router-dom";
import "./scss/Map2.scss";
import { ZoomControl } from "react-bmapgl";
import { CityListControl } from "react-bmapgl";
import axios from "./untils/Axios";
// import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";
export default function Map2() {
  let nav = useNavigate();
  var data = [
    { 
        lat: 39.9087, 
        lng: 116.3974, 
        category: '一级分类1', 
        subCategories: [
            { name: '二级分类1-1', description: '这是二级分类1-1的描述' },
            { name: '二级分类1-2', description: '这是二级分类1-2的描述' }
        ]
    },
    { 
        lat: 39.9187, 
        lng: 116.4074, 
        category: '一级分类2', 
        subCategories: [
            { name: '二级分类2-1', description: '这是二级分类2-1的描述' },
            { name: '二级分类2-2', description: '这是二级分类2-2的描述' }
        ]
    }
];
  let [user, setUser] = useState([]); //用户信息
  let [userLocation, setUserLocation] = useState([]); //用户位置信息
  let getData = async () => {
    let { data } = await axios.get("/jjt/userdata");
    setUser(data.userData);
    setUserLocation(data.user);
    console.log(data.userData);
    console.log(data.usermessage);

    // let mapFun = (user,userLocation) => {
    const { BMap } = window;
    const map = new BMap.Map("container");
    const point = new BMap.Point(115.0025864756, 38.52271243778); // //116.404, 39.915  115.0025864756, 38.52271243778
    map.centerAndZoom(point, 10);
    var opts = { type: "BMAP_NAVIGATION_CONTROL_SMALL" }; //地图缩放
    map.addControl(new BMap.NavigationControl(opts)); //地图缩放
    // map.addControl(new BMap.ScaleControl()); //地图比例尺
    map.addControl(new BMap.OverviewMapControl()); //地图缩略图
    map.addControl(new BMap.MapTypeControl()); //地图类型
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    // var bounds = map.getBounds();
    // var lngSpan = bounds.maxX - bounds.minX;
    // var latSpan = bounds.maxY - bounds.minY;
    // console.log("您的位置dfs：", lngSpan, latSpan);
    // let aaa = [
    //   [116.399, 39.91],
    //   [116.395, 39.91],
    //   [116.39, 39.91],
    // ];
    
    // for (var i = 0; i < data.userData.length; i++) {
    //   var points = new BMap.Point(data.user[i][0], data.user[i][1]);
    //   console.log(data.user[i][0], data.user[i][1], 11111);
    //   marker = new BMap.Marker(points); // 创建标注
    //   map.addOverlay(marker);
    //   //点击标注
    //   // 为每个标注添加弹出窗口
    //   // marker.addEventListener("click", function (e) {
    //   //   console.log(e.target,969694884884845)
    //   //   var opts = {
    //   //     width: 200, // 信息窗口宽度
    //   //     height: 100, // 信息窗口高度
    //   //     title: e.target.point.title, // 信息窗口标题
    //   //   };
    //   //   var infoWindow = new BMap.InfoWindow(
    //   //     "地址：" + e.target.point.title,
    //   //     opts
    //   //   );
    //   //   map.openInfoWindow(infoWindow, e.target.point); // 开启信息窗口
    //   // });
      
    //   var infoWindow = new BMap.InfoWindow(`<div><strong>dfgd</strong>
        
    //     <p>dfgdf</p>
    //     </div>`);
    //   marker.addEventListener('click', function() {
    //       this.openInfoWindow(infoWindow);
    //   });
    // }
  // 添加标记和信息窗口
  data.usermessage.forEach(function(item) {
  var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
  map.addOverlay(marker);

  // 构建信息窗口内容
  var infoContent = `<div><strong>${item.name}</strong><ul>`;
  item.children.forEach(function(subItem) {
      infoContent += `<li>在售书名: ${subItem.name}</li>`;
  });
  infoContent += `</ul></div>`;

  var infoWindow = new BMap.InfoWindow(infoContent);
  marker.addEventListener('click', function() {
      this.openInfoWindow(infoWindow);
      // 设置点击事件
      setTimeout(function() {
        var subCategoryLinks = document.querySelectorAll('.sub-category');
        subCategoryLinks.forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var index = e.target.getAttribute('data-index');
                alert('点击了二级分类: ' + item.subCategories[index].name);
            });
        });
    }, 0);
  });
});

    // 定义多个div覆盖物的坐标和内容
    console.log(data.userData,8989);
    var ComplexCustomOverlays =data.userData;
    // 自定义覆盖物类
    function ComplexCustomOverlay(point,bookname,name,bookimg) {
      this._point = point;
      this._bookname = bookname;
      this._name = name;
      this._bookimg = bookimg;
    
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map) {
      this._map = map;
      var div = (this._div = document.createElement("div"));
      div.className = "info";
      // div.innerHTML = this._bookname;
      div.style.background = "rgba(255,255,255,0.7)";
      div.style.width = "100px";
      div.style.height = "100px";
      div.style.position = "absolute";
      var p = (this._span = document.createElement("p"));   // p标签存放用户名
      p.innerHTML = this._name ;
      p.style.position = "absolute";
      p.style.width = "40px";
      p.style.height = "40px";
      // img.style.top = "-24px";
      // img.style.left = "-22px";
      // img.style.marginLeft = "-30px";
      p.style.zIndex = "1";
      p.style.backgroundSize = "contain";
      div.appendChild(p);
      var img = (this._span = document.createElement("img"));   // img标签存放图书图片
      img.src = this._bookimg ;
      img.style.position = "absolute";
      img.style.width = "40px";
      img.style.height = "40px";
      img.style.top = "40px";
      // img.style.left = "-22px";
      // img.style.marginLeft = "-30px";
      img.style.zIndex = "1";
      img.style.backgroundSize = "contain";
      div.appendChild(img);  
      var p2 = (this._span = document.createElement("p"));   // p标签存放图书名
      p2.innerHTML = this._bookname ;
      p2.style.position = "absolute";
      p2.style.width = "100px";
      p2.style.height = "100px";
      p2.style.top = "80px";
      // img.style.left = "-22px";
      // img.style.marginLeft = "-30px";
      p2.style.zIndex = "1";
      p2.style.backgroundSize = "contain";
      div.appendChild(p2);
      map.getPanes().markerPane.appendChild(div);
      return div;
    };
    ComplexCustomOverlay.prototype.draw = function () {
      var position = this._map.pointToOverlayPixel(this._point);
      this._div.style.left = position.x + "px"; // 调整位置
      this._div.style.top = position.y + "px"; // 调整位置
    };

    // 循环添加多个div覆盖物
    for (var i2 = 0; i2 < ComplexCustomOverlays.length; i2++) {
      var overlay = ComplexCustomOverlays[i2];
      
      var point4 = new BMap.Point(overlay.lng, overlay.lat);
      
      var mark = new ComplexCustomOverlay(point4,overlay.bookname,overlay.name,overlay.bookimg);
      console.log(ComplexCustomOverlay,858585);
      map.addOverlay(mark);

    }
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     var mk = new BMap.Marker(r.point);
    //     map.addOverlay(mk);//添加标注点
    //     map.panTo(r.point);//标注样式
    //     // alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     console.log("您的位置：" + r.point.lng + "," + r.point.lat);
    //   } else {
    //     // alert('failed'+this.getStatus());
    //     console.log("failed" + this.getStatus());
    //   }
    // });

    // var geolocation = new BMap.Geolocation();
    // // 开启SDK辅助定位
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function (r) {
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     var mk = new BMap.Marker(r.point);
    //     map.addOverlay(mk);
    //     map.panTo(r.point);
    //     // alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     console.log("您的位置：" + r.point.lng + "," + r.point.lat);
    //   } else {
    //     // alert('failed'+this.getStatus());
    //     console.log("failed" + this.getStatus());
    //   }
    // });
    // };
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div className="md">
      <div className="md1">
        <NavBar
          title="搜索"
          leftText="返回"
          //   rightText="按钮"
          onClickLeft={() => nav("/jjthome")}
          onClickRight={() => console.log("按钮")}
        />
      </div>
      <div id="container" style={{ width: "375px", height: "620px" }}>
        <ZoomControl></ZoomControl>
        <CityListControl></CityListControl>
      </div>
    </div>
  );
}
